import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 自定义顶部搜索导航
class SearchBar extends StatefulWidget implements PreferredSizeWidget {
  const SearchBar({
    Key? key,
    this.backgroundColor = Colors.white,
    this.hintText = "Search...",
    this.keyword = "",
    this.onPressed,
  }) : super(key: key);

  final Color backgroundColor;
  final String hintText;
  final String keyword;
  final void Function(String)? onPressed;

  @override
  State<StatefulWidget> createState() => _SearchBarState();

  @override
  Size get preferredSize => Size.fromHeight(AppBar().preferredSize.height);
}

class _SearchBarState extends State<SearchBar> {
  SystemUiOverlayStyle overlayStyle = SystemUiOverlayStyle.light;
  final TextEditingController _keywordController = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    if (widget.keyword.isNotEmpty) {
      _keywordController.text = widget.keyword;
    }
  }

  @override
  Widget build(BuildContext context) {
    overlayStyle =
        ThemeData.estimateBrightnessForColor(widget.backgroundColor) ==
                Brightness.dark
            ? SystemUiOverlayStyle.light
            : SystemUiOverlayStyle.dark;

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: overlayStyle,
      child: Material(
        color: widget.backgroundColor,
        child: SafeArea(
          child: Container(
            padding: EdgeInsets.only(bottom: 14.w),
            decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(color: Color(0xFFF0F2F2)))),
            child: Row(
              children: <Widget>[
                SizedBox(
                  width: 15.w,
                ),
                Expanded(
                  child: Container(
                    height: 38.0,
                    decoration: ShapeDecoration(
                      color: const Color(0xFFF4F5F6),
                      shape: RoundedRectangleBorder(
                          borderRadius:
                              BorderRadius.all(Radius.circular(20.w))),
                    ),
                    child: TextField(
                      key: const Key('home_field_search'),
                      onChanged: (value) {
                        if (widget.onPressed != null) {
                          widget.onPressed!.call(value);
                        }
                      },
                      onEditingComplete: () {
                        _focusNode.unfocus();
                      },
                      controller: _keywordController,
                      focusNode: _focusNode,
                      maxLines: 1,
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.only(
                          top: 4.0,
                          bottom: 4.0,
                          left: -8.0,
                          right: -16.0,
                        ),
                        border: InputBorder.none,
                        icon: Padding(
                          padding: EdgeInsets.only(
                            left: 12.w,
                            top: 4.w,
                            bottom: 4.h,
                          ),
                          child: Icon(
                            CupertinoIcons.search,
                            size: 30.w,
                          ),
                        ),
                        hintText: widget.hintText,
                        suffixIcon: _keywordController.text != ''
                            ? GestureDetector(
                                key: const Key('home_field_clear'),
                                onTap: _onDeleted,
                                child: Icon(
                                  CupertinoIcons.clear_thick_circled,
                                  size: 40.w,
                                  color: const Color(0xFFCCCCCC),
                                ),
                              )
                            : SizedBox(width: 40.w, height: 40.w),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: 15.w,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 删除搜索内容
  _onDeleted() {
    _keywordController.text = '';
    if (widget.onPressed != null) {
      widget.onPressed!.call('');
    }
  }
}
